// 居家好物的创新设计模块
<template>
  <div class="createDesign">
    <!-- 标题 -->
    <div class="page-module-title">
      <h1 align="center">{{$store.state.homegoods.goodslist[1].moduleName}}</h1>
      <h3>{{$store.state.homegoods.goodslist[1].moduleDescription}}</h3>
    </div>
    <!-- 中间商品//轮播---19条数据 -->
    <div class="page-module-body">
      <van-swipe :width="90" :show-indicators="false" class="swiper-slide">
        <van-swipe-item
          v-for="item in $store.state.homegoods.goodslist[1].moduleContent.products"
          :key="item.productId"
          @click="goTo(item)"
        >
          <img :src="item.productImg" :alt="item.productTitle" />
          <div class="product-item-info">
            <p class="product-title">{{item.productTitle}}</p>
            <span class="sell-price">￥{{item.sellPrice}}</span>

            <s class="original-price">￥{{item.originalPrice}}</s>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 查看更多 -->
    <div class="page-module-more">
      <!-- 跳转查看更多的连接 -->
      <a href="javascript:;">查看全部</a>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
// vant 的九宫格，轮播，图片引入等
import { Image, Swipe, SwipeItem } from 'vant'
// import axios from 'axios'

Vue.use(Swipe)
  .use(SwipeItem)
  .use(Image)
export default {
  data () {
    return {}
  },
  mounted () {},
  methods: {
    onChange (index) {
      this.current = index
    },
    goTo (item) {
      this.$router.push(`/item/${item.productId}`) 
      this.$store.commit('setDataList',item)
    }
  }
}
</script>

<style lang="scss">
.page-module-title {
  padding: 13px 0px 0px;
  h3 {
    font-size: 12px;
    color: #808080;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: center;
  }
  h1 {
    font-weight: bold;
    font-size: 18px;
    color: #333;
    margin: 15px 0;
    text-align: center;
  }
}
.page-module-body {
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  transition-property: transform;
  flex-wrap: nowrap;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
  img {
    width: 90px;
  }
  // van-swipe{
  //   width: 90px;
  // }
}
.swiper-slide {
  width: 100%;
  // display: flex;
  margin-right: 7.5px;
  margin-left: 10px;
}
.product-item-info {
  margin-top: 5px;
  margin-right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.product-title {
  font-size: 12px;
  color: #808080;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sell-price {
  font-size: 12px;
}
.original-price {
  color: #ccc;
  font-size: 11px;
}
.page-module-more {
  text-align: center;
  display: inline-block;
  height: 17.6px;
  width: 100%;
  position: relative;
  padding: 15px 20px 15px 20px;
  box-sizing: border-box;

  a {
    position: absolute;
    left: 50%;
    top: -5px;
    margin-left: -39px;
    font-size: 12px;
    color: #4a4a4a;
    background: url(https://m.wowdsgn.com/static/img/arrow-7e182571cb6e748f212f5c413849017d.png)
      no-repeat right center;
    background-size: 10%;
    padding: 15px;
  }
}
</style>
